@import "../../styles/index.scss";
$button-prefix-cls: "button";

// padding
$btn-padding-base: 0 15px;
$btn-padding-lg: 0 15px;
$btn-padding-sm: 0 7px;

// border-radius
$btn-border-radius-base: 4px;

// mixins
@mixin button-type(
  $startColor: $black-15,
  $borderColor: $black-15,
  $color: $black-65,
  $type: "primary"
) {
  border: 1px solid $borderColor;
  &.#{$button-prefix-cls}-ghost {
    $currentColor: $startColor !default;
    @if $type == "default" {
      $currentColor: $color;
    } @else {
      $currentColor: $startColor;
    }
    color: $currentColor;
    background-color: transparent;
    background-image: none;
    border-color: $borderColor;
    &:hover,
    &:active,
    &:focus,
    &.is-actived {
      border-color: colorTransformPalette($borderColor, 7);
      color: colorTransformPalette($currentColor, 7);
    }
    &.#{$button-prefix-cls}-disabled {
      @include button-disabled(ghost);
    }
  }
  &.has-background {
    @include has-background($startColor, $borderColor, $color, $type);
    &.#{$button-prefix-cls}-disabled {
      @include button-disabled(hasBackground);
    }
  }
  &.#{$button-prefix-cls}-link {
    @include button-link($borderColor, $color, $type);
    &.#{$button-prefix-cls}-disabled {
      @include button-disabled(link);
    }
  }
}

@mixin button-size(
  $height: $base-height,
  $padding: $btn-padding-base,
  $font-sze: $base-font-size,
  $border-radius: $btn-border-radius-base
) {
  height: $height;
  padding: $padding;
  font-size: $font-sze;
  border-radius: $border-radius;
  line-height: $height - 2;
  &.button-circle {
    width: $height * 0.8;
    height: $height * 0.8;
    line-height: $height * 0.8 - 2;
    padding: 0;
    border-radius: 100%;
  }
}

@mixin button-disabled($is-link) {
  @if $is-link != link {
    background: $black-5;
    border-color: $black-15;
  }
  color: $black-25;
  cursor: not-allowed;
  & > * {
    pointer-events: none;
  }
}

@mixin has-background($startColor, $borderColor, $color, $type) {
  background-color: $startColor;
  color: $color;
  &:hover,
  &:active,
  &:focus,
  &.is-actived {
    @if $type == "default" {
      border-color: $blue;
      color: $blue;
    } @else {
      color: $color;
      background: colorTransformPalette($startColor, 7);
      border-color: colorTransformPalette($borderColor, 7);
    }
  }
}

@mixin button-link($borderColor, $color, $type) {
  $currentColor: $color !default;
  @if $type == "default" {
    $currentColor: $color;
  } @else {
    $currentColor: $borderColor;
  }
  color: $currentColor;
  height: auto;
  line-height: 1.5;
  background: transparent;
  padding: 0;
  border-width: 0;
  border-color: transparent;
  white-space: normal;
  &:hover,
  &:active,
  &:focus,
  &.is-actived {
    color: colorTransformPalette($currentColor, 7);
  }
}

.#{$button-prefix-cls} {
  display: inline-block;
  position: relative;
  outline: none;
  vertical-align: baseline;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  margin: 0;
  box-sizing: border-box;
  text-align: center;
  white-space: nowrap;
  @include button-type(#fff, $black-15, $black-65, "default");
  @include button-size();
  transition: all 0.3s;
  &:hover,
  &:active,
  &:focus,
  &.is-actived {
    z-index: 1;
  }
  &:not(:last-child) {
    margin-right: 8px;
  }
  .icon {
    display: inline-block;
    font-size: inherit;
    & + .#{$button-prefix-cls}-content {
      margin-left: 4px;
    }
  }
  &-content {
    & + .icon {
      margin-left: 4px;
    }
  }
  &.#{$button-prefix-cls}-loading {
    pointer-events: none;
    opacity: 0.6;
  }
}

// large
.#{$button-prefix-cls}-size-large {
  @include button-size(
    $large-height,
    $btn-padding-lg,
    $large-font-size,
    $btn-border-radius-base
  );
}
// small
.#{$button-prefix-cls}-size-small {
  @include button-size(
    $small-height,
    $btn-padding-sm,
    $small-font-size,
    $btn-border-radius-base
  );
}
// tiny
.#{$button-prefix-cls}-size-tiny {
  @include button-size(
    $tiny-height,
    $btn-padding-sm,
    $small-font-size,
    $btn-border-radius-base
  );
}

// primary
.#{$button-prefix-cls}-primary {
  @include button-type($blue, $blue, #fff, "primary");
}

// danger
.#{$button-prefix-cls}-danger {
  @include button-type($red, $red, #fff, "danger");
}

// warning
.#{$button-prefix-cls}-warning {
  @include button-type($yellow, $yellow, #fff, "warning");
}

// success
.#{$button-prefix-cls}-success {
  @include button-type($green, $green, #fff, "success");
}

.#{$button-prefix-cls}-group {
  display: inline-block;
  .#{$button-prefix-cls} {
    margin-right: 0;
    margin-left: -1px;
  }
  .#{$button-prefix-cls}:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .#{$button-prefix-cls}:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .#{$button-prefix-cls}:not(:first-child):not(:last-child) {
    border-radius: 0;
  }
  .#{$button-prefix-cls}-primary:not(:first-child) {
    border-left: 1px solid colorTransformPalette($blue, 7);
  }
  .#{$button-prefix-cls}-success:not(:first-child) {
    border-left: 1px solid colorTransformPalette($green, 7);
  }
  .#{$button-prefix-cls}-danger:not(:first-child) {
    border-left: 1px solid colorTransformPalette($red, 7);
  }
  .#{$button-prefix-cls}-warning:not(:first-child) {
    border-left: 1px solid colorTransformPalette($yellow, 7);
  }
  .#{$button-prefix-cls}-link:not(:first-child) {
    border-left: 0;
  }
  &:not(:last-child) {
    margin-right: 8px;
  }
}
